{% extends 'layout/manage.html' %}
{% load static %}
{% load dashboard %}
{% load issues %}

{% block css %}
    <style>
        .table-right > tbody > tr > td.label-left {
            width: 100px;
        }

        .table-right > tbody > tr > td {
            border: 0px;
        }

        .status-count {
            text-align: center;
            margin-top: 10px;
            margin-bottom: 30px;
            font-size: 14px;
        }

        .status-count .count {
            font-size: 25px;
        }

        .status-count a {
            text-decoration: none;
        }

        .user-item .title {
            margin-bottom: 20px;
        }

        .user-item .avatar, .top-10 .avatar {
            float: left;
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #304659;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }

        .user-item .text {
            line-height: 30px;
        }

        .top-10 .avatar {
            margin-right: 0px;
        }

        .top-10 td {
            padding: 5px 10px;
        }

        .table > tbody > tr > td {
            border-top: 0px;
            border-bottom: 1px solid #ddd;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid" style="margin-top: 20px">
        <div class="col-md-8">
            <div class="row">
                <!--图表面版-->
                <div class="panel- panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart" aria-hidden="true"></i>
                        新增问题趋势
                    </div>
                    <div class="panel-body">
                        <div id="chart" style="width: 100%;min-height: 300px;">

                        </div>
                    </div>
                </div>
                <div class="row">
                    <!--2个面版-->
                    <div class="col-md-6">
                        <div class="panel- panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-bar-chart" aria-hidden="true"></i>
                                问题
                            </div>
                            <div class="panel-body">
                                {% for k, i in status_dict.items %}
                                    <div class="col-sm-4 status-count">
                                        <a href="{% url 'web:issues' project_id=request.tracer.project.id %}?status={{ k }}">
                                            <span class="count">{{ i.count }}</span>
                                            <div>{{ i.v }}</div>
                                        </a>
                                    </div>
                                {% endfor %}

                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="panel- panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-user" aria-hidden="true"></i>
                                项目成员
                            </div>
                            <div class="panel-body user-item">
                                <div class="col-sm-12 title">创建者</div>
                                <div id="clearfix" style="">
                                    <div class="col-sm-4">
                                        <div class="avatar">{{ request.tracer.project.creator.name.0|upper }}</div>
                                        <div class="text">{{ request.tracer.project.creator.name }}</div>
                                    </div>
                                </div>

                                <div class="col-sm-12 title" style="margin-top: 20px;">参与者</div>
                                <div>
                                    {% for item in user_list %}
                                        <div class="col-sm-4">
                                            <div class="avatar">{{ item.user__name.0|upper }}</div>
                                            <div class="text">{{ item.user__name }}</div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-4">
            <div class="panel- panel-default">
                <div class="panel-heading">
                    <i class="fa fa-cog title-icon" aria-hidden="true"></i>
                    详细
                </div>
                <div class="panel-body">
                    <table class="table table-right">
                        <tbody>
                        <tr>
                            <td class="label-left">项目名称：</td>
                            <td>{{ request.tracer.project.project_name }}</td>
                        </tr>
                        <tr>
                            <td class="label-left">项目描述：</td>
                            <td>{% if request.tracer.project.desc %}{{ request.tracer.project.desc }}{% else %}
                                -{% endif %}</td>
                        </tr>
                        <tr>
                            <td class="label-left">创建时间：</td>
                            <td>{{ request.tracer.project.c_time }}</td>
                        </tr>
                        <tr>
                            <td class="label-left">项目空间：</td>
                            <td>{% use_space request.tracer.project.use_space %}
                                / {{ request.tracer.price_policy.project_space }}
                                GB
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="panel- panel-default">
                <div class="panel-heading">
                    <i class="fa fa-list-ul" aria-hidden="true"></i>
                    动态
                </div>
                <div class="panel-body top-10">
                    <table class="table">
                        <tbody>
                        {% for item in top_ten %}
                            <tr>
                                <td style="width: 46px;">
                                    <div class="avatar">
                                        {{ item.creator.name.0|upper }}
                                    </div>
                                </td>
                                <td>
                                    <div>{{ item.creator.name }}</div>
                                    <div>
                                        指派
                                        <a href="{% url 'web:issues_detail' project_id=request.tracer.project.id issues_id=item.id %}">
                                            {% string_just item.id %}
                                        </a>
                                        给
                                        {{ item.assign.name }}
                                    </div>
                                </td>
                                <td style="width: 200px;">
                                    {{ item.create_datetime }}
                                </td>
                            </tr>
                        {% endfor %}

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugin/highcharts/highcharts.js' %}"></script>

    <script>

        var INIT_CHART = '{% url "web:issues_chart" project_id=request.tracer.project.id %}';
        // 取消UTC时间
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        })

        $(function () {
            initChart();
        });

        function initChart() {
            var config = {
                title: {
                    text: null,
                },
                yAxis: {
                    title: {
                        text: '问题人数'
                    }
                },
                legend: {
                    enable: false
                },
                credits: {
                    enable: false,
                },
                xAxis: {
                    type: 'datetime',
                    tickInterval: 60 * 60 * 24 * 1000,
                    labels: {
                        formatter: function () {
                            return Highcharts.dateFormat('%m-%d', this.value);
                        },
                        rotation: -30,
                    }
                },
                tooltip: {
                    headerFormat: '<b>{point.key}</b><br>',
                    pointFormat: '<span style="color: {series.color}">\u25cf</span>数量: {point.y}'
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666',
                        }
                    },
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                        pointStart: 2010
                    }
                },
                series: [{
                    data: []
                }],
            };

            $.ajax({
                url: INIT_CHART,
                type: 'GET',
                dataType: 'JSOn',
                success: function (res) {
                    config.series[0].data = res.data;
                    var chart = Highcharts.chart('chart', config);
                }

            });

        }
    </script>
{% endblock %}
